<template>
  <div class="scroll-wrapper" @scroll="hScroll" ref="refScroll">
      <van-pull-refresh v-model="isLoadingNew" @refresh="onRefresh">
      <!--
      van-list自带上拉加载更多 的效果
      原理：
        1）数据项在list中
        2）在显示数据时，如果当前的数据不足一屏，它会 自动调用 onLoad去加载数据
            在onload是要通过ajax取回新数据
            - 把数据追加到list中（list的内容会越来越多）
            - 把loading手动设置为false
            - 判断是否所有的数据已经加载完成，如果是，则把finished设为true
        3) 如果手动向上拉，且finished不为true, 也会去调用onLoad
      -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <!-- 下拉刷新 -->
        <van-cell v-for="(item, idx) in list" :key="idx" :title="item.title" @click="$router.push('/article/'+ item.art_id.toString())">
          <div slot="label">
            <!-- 图片 当前文章有几张图 就用几个宫格 -->
            <!-- 去掉van-grid的边框线 :border="false" -->
            <van-grid :column-num="item.cover.images.length" :border="false">
              <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
              <van-image :src="img" Lazyload/>
              </van-grid-item>
            </van-grid>

            <!-- 文字说明 -->
            <div class="meta">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}}评论</span>
              <!-- 使用过滤器 -->
              <!-- <span>{{item.pubdate | formatTime}}</span> -->
              <span>{{item.pubdate | relativeTime}}</span>
              <!-- 用户登录了，就出现x -->
              <!-- 给关闭按钮添加阻止冒泡的功能。 @click.stop="hClose(item)" -->
              <!-- <span class="close"  @click.stop="hClose(item)" v-if="$store.state.tokenInfo.token"> -->
              <span class="close" @click.stop="hClose(item)" v-if="isLogin">
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getArticles } from '@/api/article.js'
export default {
  name: 'ArticleList',
  // 接收从父组件获取的频道信息
  props: ['channel'],
  data () {
    return {
      // 是否刷新
      isLoadingNew: false,
      list: [],
      timestamp: null,
      loading: false,
      finished: false
    };
  },
  computed: {
    ...mapGetters(['isLogin'])
  },
  created () {
    // 事件总线监听要删除的对应频道的文章
    console.log(this.channel, 'created,启动了监听')
    this.$eventBus.$on('delArticle', (obj) => {
      // obj { articleId ,channelId}
      const { articleId, channelId } = obj
      console.log('我这里是', this.channel, '收到了事件qhjpl', channelId, obj)
      // 是否是当前频道：
      //   是：在list中找到编号是obj.articleId的数据，并删除
      //   否：不处理
      if (channelId !== this.channel.id) {
        console.log('你要删除的文章不在我这个' + this.channel.name + '上')
        return
      }

      console.log(`在list中找到编号是${articleId}的数据，并删除`)
      // 在数组中找到一个元素，并删除
      // 1. 找下标
      // 2. 做删除
      const idx = this.list.findIndex(article => {
        return article.art_id.toString() === articleId
      })
      if (idx !== -1) {
        // 找到了元素
        // 如何在数组中，删除指定下标的元素？
        this.list.splice(idx, 1)
      }
    })
  },
  methods: {
    // 当用户在文章列表中滚动时，会记下滚动条的位置scrollTop
    hScroll () {
      // console.log(this.$refs.refScroll.scrollTop)
      // scrollTop并不是定义在data中 响应式的数据
      this.scrollTop = this.$refs.refScroll.scrollTop
    },
    // 关闭文章x
    hClose (article) {
      // 打印当前要删除的文章id编号
      // console.log('当前要删除的文章编号：', article.art_id.toString());
      const articleId = article.art_id.toString()
      // 通知父组件index.vue去显示弹层,抛出emit
      this.$emit('showMoreAction', articleId)
    },
    // 下拉刷新
    async onRefresh () {
      // 1.去取回最新的文章,传入
      const result = await getArticles(this.channel.id, Date.now())
      // 2.把文章追加到list 的头部还是尾部?
      const arr = result.data.data.results
      this.list.unshift(...arr)
      // this.list = [...arr, ...this.list]
      // this.list = arr.concat(this.list)
      // 3.提示更新结果
      this.$toast.success('刷新成功' + arr.length + '条')
      // 4.结束loading状态
      this.isLoadingNew = false
      // setTimeout(() => {
      //   this.$toast('刷新成功');
      //   this.isLoading = false;
      // }, 1000);
    },
    // List 组件通过loading和finished两个变量控制加载状态，
    // 当组件滚动到底部时，会触发load事件并将loading设置成true。
    // 此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。
    // 若数据已全部加载完毕，则直接将finished设置成true即可。

    // 1. 如果当前的内容不够一屏 ，它会自动去调用onLoad去加载数据
    // 2. 组件滚动到底部时，它会再次去触发onLoad
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      // 1.发请求
      const result = await getArticles(this.channel.id, this.timestamp)
      // 保存本次请求回来的数据中携带的时间戳，以便下传请求再传入
      this.timestamp = result.data.data.pre_timestamp
      const arr = result.data.data.results
      console.log(arr);// 这里有10条数据
      // 2. 把数据添加到list中去
      //   把10条数据追加到数据中去
      this.list.push(...arr)

      // 3.加载状态结束
      this.loading = false;
      // 4.是否全部加载完成
      if (arr.length === 0) {
        this.finished = true;
      }
    }
  },
  // 如果对于组件(包含其下的子组件)采用了缓存 <keep-alive>，则它会多出两个生命周期钩子函数：activated, deactivated。
  // 当articleList.vue激活时恢复
  activated () {
    console.log('激活 activated...activated...activated...activated...')
    if (this.scrollTop) {
      // 恢复滚动条位置
      this.$refs.refScroll.scrollTop = this.scrollTop
    }
  },
  deactivated () {
    // this.scrollTop = this.$refs.refScroll.scrollTop
    console.log('失活 deactivated...deactivated...deactivated...deactivated...')
  }
}
</script>

<style scoped lang="less">
.meta {
  display: flex;
  span{
    margin-right: 10px;
  }
  .close {
    margin-left: auto;
  }
}
</style>
